import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet, Dimensions, Modal, Text, Image} from "react-native";
// import ImagePicker from "react-native-image-picker"
import SYImagePicker from "react-native-syan-image-picker";
import ClosableModal from "rn-closable-modal";
import {ImageButton} from "../CustomButton";
import {uploadImage} from "../../api/NetworkTool";
const {width, height} = Dimensions.get('window');
export default class MineAvatorPhotoDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            avatarSource: this.props.avatar,
            fileUrl: '',
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal = () => {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.callbackAvatar({avatarSource: this.state.avatarSource, fileUrl: this.state.fileUrl})
    }

    camera() {
        SYImagePicker.openCamera({isCrop: true, showCropCircle: true, showCropFrame: false}, (err, photos) => {
            if (photos == null) {
                return
            }
            let response = photos[0]
            let source = {uri: response.uri};
            if (response.uri == null) {
                return
            }
            let fileNames = response.uri.split('/')
            let fileName = fileNames[fileNames.length - 1]
            uploadImage({path: response.uri, fileName: fileName})
                .then(res => {
                    if (res.code = 200) {
                        let fileurl = res.output;
                        this.setState({
                            avatarSource: source,
                            fileUrl: fileurl,
                        });
                        this.closeModal()
                    }
                })
                .catch(err => {
                })
        })
        // ImagePicker.launchCamera(photoOptions, response => {
        //     if (response.error) {
        //         console.log('ImagePicker Error: ', response.error);
        //     } else {
        //         let source = {uri: response.uri};
        //         if (response.uri == null) {
        //             return
        //         }
        //         let fileNames = response.uri.split('/')
        //         let fileName = fileNames[fileNames.length - 1]
        //         console.log(response.uri, response.fileName)
        //         uploadImage({path: response.uri, fileName: fileName})
        //             .then(res => {
        //                 if (res.code = 200) {
        //                     let fileurl = res.output;
        //                     this.setState({
        //                         avatarSource: source,
        //                         fileUrl: fileurl,
        //                     });
        //                 }
        //             })
        //             .catch(err => {
        //             })
        //
        //     }
        // })
    }

    library() {
        SYImagePicker.showImagePicker({imageCount: 1, isCrop: true, showCropCircle: true}, (err, photos) => {
            // console.log('===========', photos[0]);
            if (photos == null) {
                return
            }
            let response = photos[0]
            let source = {uri: response.uri};
            if (response.uri == null) {
                return
            }
            let fileNames = response.uri.split('/')
            let fileName = fileNames[fileNames.length - 1]
            uploadImage({path: response.uri, fileName: fileName})
                .then(res => {
                    if (res.code = 200) {
                        let fileurl = res.output;
                        this.setState({
                            avatarSource: source,
                            fileUrl: fileurl,
                        });
                        this.closeModal()
                    }
                })
                .catch(err => {
                })

            {/*ImagePicker.launchImageLibrary(photoOptions, response => {*/
            }
            {/*if (response.error) {*/
            }
            //         console.log('ImagePicker Error: ', response.error);
            //     } else {
            //         let source = {uri: response.uri};
            //         if (response.uri == null) {
            //             return
            //         }
            //         console.log(response)
            //         uploadImage({path: response.uri, fileName: response.fileName})
            //             .then(res => {
            //                 if (res.code = 200) {
            //                     let fileurl = res.output;
            //                     this.setState({
            //                         avatarSource: source,
            //                         fileUrl: fileurl,
            //                     });
            //                 }
            //             })
            //             .catch(err => {
            //             })
            //
            //     }
            // })

        })

    }

    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                >
                    <View style={styles.white_background}>
                        <ImageButton onPress={()=>{this.closeModal()}} style={{marginLeft:15,marginTop:15}}
                                     source={require('../../../res/img/dialog/icon_cancel.png')}/>
                        <View style={{justifyContent:'center',alignItems:'center',flexDirection:'row', marginTop:27}}>
                            <View
                                style={{justifyContent:'center',alignItems:'center',flexDirection:'row',width:119,height:119,backgroundColor:'white',borderWidth:1,borderRadius:60,borderColor:'rgba(224, 224, 224, 1)'}}>
                                <Image style={{width:110,height:108,borderRadius:55}} source={this.state.avatarSource}/>
                            </View>
                        </View>
                        <View style={{backgroundColor:'white',flexDirection:'row',marginTop:40}}>
                            <TouchableOpacity onPress={()=>{this.library()}}
                                              style={{backgroundColor:"#DB3843",width:126,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',marginLeft:28,flexDirection:'row'}}>
                                <Image style={{width:19,height:14, marginLeft:18}}
                                       source={require('../../../res/img/dialog/mine_library.png')}/>
                                <View style={{flex:1}}/>
                                <Text style={{color:'white',fontWeight:'bold',fontSize:14,marginRight:18}}>相册选择</Text>
                            </TouchableOpacity>
                            <View style={{flex:1}}/>
                            <TouchableOpacity onPress={()=>{this.camera()}}
                                              style={{backgroundColor:"#DB3843",width:126,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',marginRight:28,flexDirection:'row'}}>
                                <Image style={{marginLeft:18,width:17,height:15,}}
                                       source={require('../../../res/img/dialog/mine_camea.png')}/>
                                <View style={{flex:1}}/>
                                <Text style={{color:'white',fontWeight:'bold',fontSize:14,marginRight:18}}>直接拍照</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },

    white_background: {
        width: 331,
        height: 270,
        backgroundColor: 'white',
        borderRadius: 4,
    },
});
const photoOptions = {
    title: '请选择',
    quality: 0.4,
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    allowsEditing: true,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};